<template>
  <div class="page-container" :style="{background:bgStyle}">
    <!-- 顶部导航区域 -->
    <div class="navigation" ref="navigation" :style="{color:titleColor,fontSize:titleSize+'px'}">农业数据实时监控系统</div>
    <div class="changeTheme" @click="changeTheme">主题切换</div>
    <!-- 底部大盒子 -->
    <div class="content">
      <!-- 左侧俩个 -->
      <div class="left-content">
        <div class="left-content-top">
            <v-plant></v-plant>
        </div>
        <div class="left-content-bottom">
            <v-income></v-income>
        </div>
      </div>
      <!-- 中间俩个 -->
      <div class="center-content">
        <div class="center-content-top">
            <v-annular></v-annular>
        </div>
        <div class="center-content-bottom">
            <v-map></v-map>
        </div>
      </div>
      <!-- 右侧俩个 -->
      <div class="right-content">
        <div class="right-content-top">
            <v-line></v-line>
        </div>
        <div class="right-content-bottom">
            <v-pie></v-pie>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vPlant from '../views/plantInfo.vue'
import vIncome from '../views/income.vue'
import vAnnular from '../views/annular.vue'
import vMap from '../views/map.vue'
import vLine from '../views/line.vue' 
import vPie from '../views/pie.vue'
export default {
  data() {
    return {
        titleColor:'#000',
        titleSize:40,
        isShow:true,
        bgStyle:'#fff'
    };
  },
  components:{
    vPlant,
    vIncome,
    vAnnular,
    vMap,
    vLine,
    vPie
  },
  computed: {},
  mounted() {
    this.screen()
    window.addEventListener('resize',this.screen)
  },
  methods: {
    screen(){
        this.titleSize=this.$refs.navigation.offsetWidth/40
    },
    changeTheme(){
        this.isShow=!this.isShow
        if(this.isShow){
            this.titleColor='#000',
            this.bgStyle='#fff'
        }else{
            this.titleColor='#fff',
            this.bgStyle='#000'
        }
        this.$store.commit('changeTheme',this.isShow)
    }
  },
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  /* background-image: url(../../public/static/img/bgc01.png) */
  /* background-color: #333333; */
}
/* 顶部导航样式 */
.navigation {
  flex: 2;
  width: 100%;
  /* background-color: orange; */
  background-image: url(../../public/img/top02.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  font-weight: 600;
  color: #fcf8e3;
  text-align: center;
  /* line-height: 3.2rem; */
}
.content {
  flex: 15;
  display: flex;
}
/* 左侧盒子 */
.content .left-content {
  flex: 1;
  /* border: 1px solid #38C5EC; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.content .left-content .left-content-top {
  width: 95%;
  height: 53%;
  border: 1px solid #38c5ec;
}
.content .left-content .left-content-bottom {
  width: 95%;
  height: 42%;
  border: 1px solid #38c5ec;
}

/* 中间盒子 */
.content .center-content {
  flex: 2;
  /* border: 1px solid #38C5EC; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.content .center-content .center-content-top {
  width: 95%;
  height: 22%;
  border: 1px solid #38c5ec;
}
.content .center-content .center-content-bottom {
  width: 95%;
  height: 75%;
  border: 1px solid #38c5ec;
}

/* 右侧盒子 */
.content .right-content {
  flex: 1;
  /* border: 1px solid #38C5EC; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.content .right-content .right-content-top {
  width: 95%;
  height: 48%;
  border: 1px solid #38c5ec;
}
.content .right-content .right-content-bottom {
  width: 95%;
  height: 48%;
  border: 1px solid #38c5ec;
}

/* 主题切换 */
.changeTheme {
  color: #4cd964;
  position: fixed;
  top: 0.625rem;
  right: 1.25rem;
  cursor: pointer;
}
</style>
